<template>
  <el-col class="com_class">
    <el-col class="title">用户分类管理</el-col>
    <el-table :data="class_list" border stripe size="small">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
      ></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status">
            <el-tag type="success">已启用</el-tag>
          </template>
          <template v-else>
            <el-tag type="warning">未启用</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <template v-if="scope.row.status">
            <el-button
              size="mini"
              @click.native.prevent="check(scope.$index,scope.row)"
              type="warning"
            >
              <i class="el-icon-coin"></i> 禁用
            </el-button>
          </template>
          <template v-else>
            <el-button
              size="mini"
              @click.native.prevent="check(scope.$index,scope.row)"
              type="primary"
            >
              <i class="el-icon-coin"></i> 启用
            </el-button>
          </template>

          <el-button
            @click.native.prevent="editRow(scope.$index,scope.row)"
            type="danger"
            plain
            size="mini"
          >
            <i class="el-icon-edit-outline"></i>
            修改
          </el-button>
          <el-button
            @click.native.prevent="deleteRow(scope.$index,scope.row)"
            type="text"
            size="mini"
          >
            <i class="el-icon-delete"></i>
            移除
          </el-button>
          <!-- <template v-if="scope.row.status">
            <el-tag type="success">已启用</el-tag>
          </template>
          <template v-else>
            <el-tag type="warning">未启用</el-tag>
          </template>-->
        </template>
      </el-table-column>
    </el-table>
    <el-col class="class_bottom">
      <el-button type="primary" @click="add_class" size="mini">添加分类</el-button>
    </el-col>
    <el-dialog
      title="添加分类"
      :visible.sync="addclass"
      width="30%"
      @close="end"
      :modal-append-to-body="false"
    >
      <el-col class="class_put">
        <el-col :span="5">名称:</el-col>
        <el-col :span="18">
          <el-input v-model="addform.name" size="small" placeholder="请输入名称"></el-input>
        </el-col>
      </el-col>
      <el-col class="class_put">
        <el-col :span="5">分类描述:</el-col>
        <el-col :span="18">
          <el-input v-model="addform.detail" size="small" placeholder="请输入分类描述"></el-input>
        </el-col>
      </el-col>
      <span slot="footer">
        <!-- <el-button @click=" = false">取 消</el-button> -->
        <template v-if="editclass">
          <el-button type="primary" @click="editsubimit" size="small">修改</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="addsubimit" size="small">确 定</el-button>
        </template>
      </span>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      class_list: [],
      addclass: false,
      editclass: false,
      columns: [
        {
          id: "name",
          label: "名称"
        },
        {
          id: "detail",
          label: "分类描述"
        }
      ],
      addform: {
        name: "",
        detail: ""
      }
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    async getlist() {
      //获取列表
      let res = await this.$store.dispatch("user_list_type", "");
      this.class_list = res.data;
    },
    async check(index, row) {
      //启用
      let data = {
        type_id: row.id
      };
      let res = await this.$store.dispatch("user_disable_type", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.getlist();
      }
    },
    async editRow(index, row) {
      //编辑
      this.addclass = true;
      this.editclass = true;
      this.addform.name = row.name;
      this.addform.detail = row.detail;
      this.addform.type_id = row.id;
    },
    async editsubimit() {
      let res = await this.$store.dispatch("user_edit_type", this.addform);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "修改成功"
        });
        this.getlist();
        this.end();
      }
    },
    async deleteRow(index, row) {
      //删除
      let data = {
        type_id: row.id
      };
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteRowfn(data);
        })
        .catch(() => {});
    },
    async deleteRowfn(data) {
      let res = await this.$store.dispatch("user_delete_type", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "删除成功"
        });
        this.getlist();
      }
    },
    add_class() {
      this.addclass = true;
    },
    async addsubimit() {
      //提交对应的内容
      let res = await this.$store.dispatch("user_add_type", this.addform);
      if (!res.code) {
        this.addclass = false;
        this.$message({
          type: "success",
          message: "创建成功"
        });
        this.getlist();
        this.form.name = "";
        this.form.detail = "";
      }
    },
    end() {
      this.addclass = false;
      this.editclass = false;
      this.addform.name = "";
      this.addform.detail = "";
    }
  }
};
</script>